<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>DoitCSS V2.3 表格 -实例</title>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keywords" content="DoitCSS V1.0">
	<meta name="description" content="DoitCSS是根据bootstap改编的CSS框架">
	<!--基础-->
	<link href="../css/base.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--文字排版-->
	<link href="../css/typography.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--表格-->
	<link href="../css/tables.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--表单按钮-->
	<link href="../css/form-buttons.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--架构-->
	<link href="../css/layouts.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--元件-->
	<link href="../css/elements.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--图标-->
	<link href="../css/icons.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--菜单-->
	<link href="../css/navigation.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--分页-->
	<link href="../css/pagination.css?ver=v2.3" rel="stylesheet" type="text/css">
	<!--清除浮动-->
	<link href="../css/clear.css?ver=v2.3" rel="stylesheet" type="text/css">
</head>

<body>
<div class="container">
	<table class="table">
		<caption>默认表格：</caption>
		<thead>
			<tr>			
				<th>T1</th>
				<th>T2</th>
				<th>T3</th>			
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>A1</td>
				<td>B1</td>
				<td>C1</td>
			</tr>		
		<tr>
			<td>A2</td>
			<td>B2</td>
			<td>C2</td>
		</tr>
		</tbody>
	</table>
	
	<table class="table table-bordered">
		<caption>有边框的表格：</caption>
		<thead>
			<tr>			
				<th>T1</th>
				<th>T2</th>
				<th>T3</th>			
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>A1</td>
				<td align="center">B1</td>
				<td>C1</td>
			</tr>		
		<tr>
			<td>A2</td>
			<td>B2</td>
			<td>C2</td>
		</tr>
		</tbody>
	</table>

	<table class="table table-bordered table-hover">
		<caption>鼠标放上有背景色：</caption>
		<thead>
			<tr>			
				<th>T1</th>
				<th>T2</th>
				<th>T3</th>			
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>A1</td>
				<td align="center">B1</td>
				<td>C1</td>
			</tr>		
		<tr>
			<td>A2</td>
			<td>B2</td>
			<td>C2</td>
		</tr>
		</tbody>
	</table>

	<table class="table table-bordered">
		<caption>当前选中的表格：</caption>
		<thead>
			<tr>			
				<th>T1</th>
				<th>T2</th>
				<th class="active">T3</th>			
			</tr>
		</thead>
		<tbody>
			<tr class="active">
				<td>A1</td>
				<td align="center">B1</td>
				<td>C1</td>
			</tr>		
			<tr>
				<td>A2</td>
				<td>B2</td>
				<td>C2</td>
			</tr>
		</tbody>
	</table>

	<table class="table table-bordered table-hover">
		<caption>交互效果的表格</caption>
		<thead>
			<tr>			
				<th>T1</th>
				<th>T2</th>
				<th>T3</th>			
			</tr>
		</thead>
		<tbody>
			<tr class="success">
				<td>A1</td>
				<td align="center">B1</td>
				<td><a href="#">C1</a></td>
			</tr>		
			<tr class="danger">
				<td>A2</td>
				<td>B2</td>
				<td><a href="#">C2</a></td>
			</tr>
			<tr class="warning">
				<td>A1</td>
				<td align="center">B1</td>
				<td><a href="#">C3</a></td>
			</tr>		
			<tr class="info">
				<td>A2</td>
				<td>B2</td>
				<td><a href="#">C4</a></td>
			</tr>
		</tbody>
	</table>
</div>
</body>
</html>